<template>
  <view class="content">
    <image class="logo" src="/static/logo.png" />
    <view class="unocss-test">unocss-test</view>
    <view class="text-area">
      <text class="title mb-3">{{ title }}</text>
    </view>
    <view class="text-area">
      <text class="title mb-8">{{ name }}</text>
    </view>
    <view @click="updateNameFn">updateName</view>
    <view @click="requestFn">点击请求</view>

  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import useDemoStore from '@/store/demo';
import { fetchList } from '@/api/demoApi';
const demoStore = useDemoStore();
demoStore.updateName('fanfan')
const title = ref('Hello 456789')
const name = ref(demoStore.name);
console.log('name', name.value);
setTimeout(function() {
  name.value = '3213123123'
  console.log('fullname1111', name.value)
}, 3000)
function updateNameFn() {
  let str = Math.round(Math.random() * 1000) + ' newName';
  demoStore.updateName(str)
  console.log('demoStore', demoStore.name)
  name.value = demoStore.name
}
async function requestFn() {
  let res = await fetchList({
    regionCodes: [110000],
    page: { current: 0, size: 10 }
  })
  console.log('res', res);
}
</script>

<style lang="scss" scoped>
.unocss-test {
  padding: 10rpx;
}
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
</style>
